/*
 * @Author: your name
 * @Date: 2023-10-11 13:03:45
 * @LastEditTime: 2023-10-13 10:07:20
 * @LastEditors: Please set LastEditors
 * @Descripttion: In User Settings Edit
 * @FilePath: /bicycle-mobile-old/h5/src/components/meeting/MeetingItem.js
 */
import { useIntl, getLocale } from 'umi';
import { useHistory } from 'dva';
import moment from 'moment';

import VideoIcon from './VideoIcon';

import IconDate from '../../assets/icon/icon-date.png';
import IconAddress from '../../assets/icon/icon-address.png';

import styles from './MeetingItem.less';

const MeetingItem = ({ item }) => {
  const intl = useIntl();
  const history = useHistory();

  const lang = () => getLocale()?.split('-')[0]?.toUpperCase();

  const formatDate = (date) => {
    return moment(date).format('YYYY/MM/DD');
  };

  const toDetail = () => {
    history.push(`/meeting/${item.id}`);
  };

  return (
    <div className={styles.meetingItem} onClick={toDetail}>
      {/* <div
        className={styles.cover}
        style={{
          backgroundImage: `url(${item.coverUrl})`,
        }}
      ></div> */}
      <img src={item.coverUrl} className={styles.cover} />
      <div className={styles.infoBox}>
        <div className={styles.name}>{lang() == 'ZH' ? item.name : item.nameEn}</div>

        <div className={styles.info}>
          <div className={styles.infoRow}>
            <img src={IconDate} />
            <span>
              {formatDate(item.startDateTime)} - {formatDate(item.endDateTime)}
            </span>
          </div>
          <div
            className={styles.infoRow}
            style={{
              marginTop: 3,
            }}
          >
            <img src={IconAddress} />
            <span>{lang() == 'ZH' ? item.address : item.addressEn}</span>
          </div>
        </div>
      </div>
      <VideoIcon meeting={item} />
    </div>
  );
};

export default MeetingItem;
